<script setup lang="ts">
import { ElCard, ElScrollbar } from 'element-plus'
import { ElIcon } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import VueTypes from 'vue-types'
import { computed, useAttrs, useSlots } from 'vue'

const slots = useSlots()

const props = defineProps({
  modelValue: VueTypes.bool.def(false),
  title: VueTypes.string.def('默认标题')
})

const emit = defineEmits(['close'])

const getBindValue = computed(() => {
  const delArr: string[] = ['title']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      // @ts-ignore
      delete obj[key]
    }
  }
  return obj
})

const close = () => emit('close')

</script>

<template>
  <ElCard v-bind="getBindValue">
    <template #header>
      <div class="flex justify-between items-center h-54px pl-15px pr-15px relative">
        <slot name="title">
          {{ title }}
        </slot>
        <div
          class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
        >
          <el-icon class="cursor-pointer is-hover !h-54px" color="var(--el-color-info)" @click="close"><Close /></el-icon>
        </div>
      </div>
    </template>

    <ElScrollbar>
      <slot></slot>
    </ElScrollbar>

    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </ElCard>
</template>

<style lang="less" scoped>

</style>
